import {Layout} from "@/components/Layout.tsx";
import {Label} from "@/components/ui/label.tsx";
import {Input} from "@/components/ui/input.tsx";
import {Eye, EyeOff} from "lucide-react";
import {Button} from "@/components/ui/button.tsx";
import React, {useState} from "react";
import {toast} from "sonner";
import {useMutation} from "@tanstack/react-query";
import userService from "@/api/services/userService.ts";
import {useUserToken} from "@/store/userStore.ts";
import {useNavigate} from "react-router-dom";

export const EditPwdPage = () => {
    const [newPassword, setNewPassword] = useState('')
    const [confirmPassword, setConfirmPassword] = useState('')
    const [passwordError, setPasswordError] = useState('')
    const [isUpdating, setIsUpdating] = useState(false)
    const editPwdMutation = useMutation({
        mutationFn: userService.editPwd,
    });
    const [showPassword, setShowPassword] = useState(false)
    const [showCPassword, setShowCPassword] = useState(false)
    const userToken = useUserToken();
    const navigate = useNavigate();
    const handlePasswordUpdate = async (e: React.FormEvent) => {
        e.preventDefault()
        setPasswordError('')

        if (newPassword !== confirmPassword) {
            setPasswordError('新密码和确认密码不一致')
            return
        }

        if (newPassword.length < 6) {
            setPasswordError('新密码长度至少6位')
            return
        }

        setIsUpdating(true)
        try {
            await editPwdMutation.mutateAsync({
                new_passwd: newPassword, token: userToken.token
            })
            setNewPassword('')
            setConfirmPassword('')
            toast.success('密码修改成功', {
                position: "top-center",
            });
            navigate(-1);
        } catch (err) {
            toast.error(err.message, {
                position: "top-center",
            });
        } finally {
            setIsUpdating(false)
        }
    }


    return (
        <Layout title={"修改密码"} showBottomNav={false} showBottomBack={true}>
            <div className=" items-center  mt-5 min-h-[calc(100vh-120px)] px-6">

                <form onSubmit={handlePasswordUpdate} className="space-y-4">
                    <div className="space-y-2 mb-5">
                        <Label htmlFor="newPassword" className="text-[16px]">新密码</Label>
                        <div className="relative">
                            <Input
                                id="newPassword"
                                type={showCPassword ? 'text' : 'password'}
                                placeholder="请输入新密码"
                                value={newPassword}
                                onChange={(e) => setNewPassword(e.target.value)}
                                required
                                className="h-12"
                            />
                            <button
                                type="button"
                                onClick={() => setShowCPassword(!showCPassword)}
                                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                            >
                                {showCPassword ? <EyeOff size={20}/> : <Eye size={20}/>}
                            </button>
                        </div>
                    </div>

                    <div className="space-y-2">
                        <Label htmlFor="confirmPassword" className="text-[16px]">确认新密码</Label>
                        <div className="relative">
                            <Input
                                id="confirmPassword"
                                type={showPassword ? 'text' : 'password'}
                                placeholder="请再次输入新密码"
                                value={confirmPassword}
                                onChange={(e) => setConfirmPassword(e.target.value)}
                                required
                                className="h-12"
                            />
                            <button
                                type="button"
                                onClick={() => setShowPassword(!showPassword)}
                                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
                            >
                                {showPassword ? <EyeOff size={20}/> : <Eye size={20}/>}
                            </button>
                        </div>
                    </div>

                    {passwordError && (
                        <div className="text-red-500 text-sm">{passwordError}</div>
                    )}

                    <div>
                        <Button
                            type="submit"
                            className="w-full h-12  "
                            disabled={isUpdating}
                        >
                            {isUpdating ? '修改中...' : '确认修改'}
                        </Button>
                    </div>
                </form>
            </div>
        </Layout>

    )
}